<template>
  <div class="commonEdit">
    <div class="main-label">
      <div style="display: inline-block">
        新增城市关联Area
      </div>
      <el-button class="head-btn" @click="handleSubmit">保存</el-button>
      <el-button class="head-btn" @click="editBack">返回</el-button>
    </div>
    <el-form :model="submit" ref="form"  label-width="120px"  status-icon inline-message>
      <el-row>
        <el-col :span="12">
          <el-form-item label="年份">
            <el-select   placeholder="请选择" v-model="submit.fkMDMYear">
              <el-option v-for="item of yearList" :label="item.year" :value="item.pkid" :key="'year'+item.pkid"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关联Area" :rules="{ required: true, message: '请选关联Area', trigger: 'blur' }" prop="fkRegion">
            <el-select   placeholder="请选择" v-model="submit.fkRegion" >
              <el-option v-for="item of areaList" :label="item.buName" :value="item.regionid" :key="'area'+item.regionid"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="省份">
            <el-select   placeholder="请选择" v-model="submit.fkProvince" @change="provinceChange">
              <el-option v-for="item of provinceList" :label="item.provinceName" :value="item.pkid" :key="'province'+item.pkid"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item label="销售城市" :rules="{ required: true, message: '请选择销售城市', trigger: 'blur' }" prop="fkCity">
            <el-select   placeholder="请选择" v-model="submit.fkCity" >
              <el-option v-for="item of cityList" :label="item.cityName" :value="item.pkid" :key="'city'+item.pkid"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>
  export default {
      name:'relationAreaEdit',
      props:{
          outBtn:Object,
          bUid:'',
          originalData:Object
      },
      data(){
          return{
              submit:Object.assign({},this.originalData),
              provinceList:[],
              cityList:[],
              areaList:[],
              yearList:[]
          }
      },
      methods:{
          editBack() {
            this.$emit('editBack',null)
          },
          getProvince() {
              this.$http.get(this.$api.API_QUERYPROVINCE_NOPAGE).then(resp=>{
                  this.provinceList = resp
                  this.$forceUpdate()
              })
          },
          getYear() {
              this.$http.get(this.$api.API_SELECTMDMYEAR).then(resp=>{
                  this.yearList = resp.list.filter(item=>{
                      return item.active>0
                  })
                  this.submit.fkMDMYear = this.yearList[0].pkid
              })
          },
          getArea() {
              this.$http.get(this.$api.API_QUERT_AREAR_BY_GUID,{guid:this.bUid}).then(resp=>{
                  this.areaList = resp
              })
          },
          provinceChange(val) {
              this.$http.get(this.$api.API_QUERYCITY,{fkProvince:val,pageSize:0}).then(resp=>{
                  this.cityList = resp.list
              })
          },
          handleSubmit() {
              console.log(this.originalData)
              let url = (!this.originalData || JSON.stringify(this.originalData)=='{}')?this.$api.API_ADD_CORRELATION_AREA:this.$api.API_UPDATE_CORRELATION_AREA
              this.$refs.form.validate((valid) => {
                  if (!valid) {
                      this.$message.error('缺少字段！')
                      return false;
                  }
              });
              this.$http.post(url,this.submit).then(resp=>{
                  this.$message.success('保存成功')
                  this.editBack()
              },msg=>{})
          }
      },
      created() {
          this.getProvince()
          this.getArea()
          this.getYear()
          if (this.originalData.fkProvince) {
              this.provinceChange(this.originalData.fkProvince)
          }
      }
  }
</script>

<style lang="less" scoped>
  .main-label{
    border: #ccc 1px solid;
    border-bottom: 0;
    height: 36px;
    line-height: 35px;
    font-weight: bold;
    padding-left: 5px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .grid-content {
    min-height: 36px;
  }
  .head-btn{
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    vertical-align: center;
    font: 8px/8px HelveticaNeue, Arial;
    padding: 0px 11px;
    border: 1px solid #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 9pt;
    margin-left: 2px;
    line-height: 25px;
    color: #000;
    outline: none;
    background-image: url(../../assets/img/datagrid_header_bg.gif);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
  &:hover {
     color: #FFF;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc');
     border: 1px solid #d51900;
     background: linear-gradient(top, #d51900, #d51900);
     background: -moz-linear-gradient(top, #d51900, #d51900);
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d51900), to(#d51900));
     text-shadow: -1px -1px 1px #1c6a9e;
   }
  /deep/span{
    display: block;
  }
  }

  /deep/.el-form-item__error {
    color: #F56C6C;
    font-size: 12px;
    line-height: 40px;
    position: absolute;
    padding: 0 5px !important;
    top: 0;
    left: 0;
  }
  /deep/.el-form-item {
    margin-bottom: 0px;
  }
  /deep/.el-input__inner{
    border-radius: 0px;
  }
  .el-row{
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    .el-col:first-child{
      padding: 10px 0;
      border-right: 1px solid #eee;
    }
    .el-input{
      padding-right: 10px;
    }
    .el-textarea{
      padding-right: 10px;
    }
  }
</style>
